/************************************************************************************************************
*	Content View Box
*	Author			Paul Kevin
*	Created:			12-Jan - 2009
*	Purpose of class:		Create divs and animate
* 	Update log:			<log of change>
*
************************************************************************************************************/

/**
 * declare global variables
 */
var main;
var n = 1, myDiv, oInput;
var add = true;
var browser=navigator.appName;
var height;
var width;
var number;
var pics = new Array();



/**
 * Default constructor
 */
function main(){
}


main.prototype = {
	/*
	 * Global Variables
	 */
	 
	
	getAll : function(width,height, number, top_row){
		_main.setHeight(height);
		_main.setWidth(width);
		_main.setNumber(number);
		_main.readTextBox(number,width,height);
		
		var topR = Math.round((number/top_row),2);
		var h = Math.round(top_row/2);
		var leftCells = number % top_row;
		
		if((leftCells != 0) & (leftCells < h)){
			++topR;
		}
		
		var main = document.getElementById("main");
		var mH = ((10 + height) * (topR));
		var mW = ((10 + width) * top_row);
		main.style.height =  mH +"px";
		main.style.width = mW +"px";
		//main.style.background = "#CCCCCC";
		main.style.border = "2px solid #000000";
	},
	
	/**
	 * Getters and setters
	 */
	getHeight: function(){
		return this.height;
	},
	
	
	setHeight : function(height){
		this.height = height;
	},
	
	getWidth : function(){
		return this.width;
	},
	
	setWidth : function(width){
		this.width = width;
	},
	
	getNumber : function(){
		return this.number;
	},
	
	setNumber : function(number){
		this.number = number;
	},
	
	setPics : function(expics){
		this.pics = expics;
	},
	
	getPics : function(){
		return this.pics;
	},
	

	/**
	 * Function to read from text box
	 */
	 readTextBox : function(oSelect,width,height){
	 //Variable to store data from user input
		var howmany = oSelect;
		
	      while (myDiv = document.getElementById('myDiv' + n))
	      if (n++ > howmany) {
			  add = false;
			  oForm.removeChild(myDiv);
	      }

	      if (add)
		  main = document.getElementById("main");

		  main.style.visibility = "visible";
	      for (n; n <= howmany; ++n) {
			  //Create div element inside main div
			  myDiv = document.createElement('div');
			  
			  //Set div attributes
			  myDiv.id = n;
				
			  myDiv.style.width = width +"px";
			  myDiv.style.height= height +"px";
			  
			  //Call random color  to display divs with different colors
			  //myDiv.style.background = "url(img/thumb.gif)";
			  //myDiv.style.border = "2px solid #000000";
			  myDiv.style.margin = "3px";
			  myDiv.style.visibility = "visible";
			  var rand_url =  this.getPics();

			  var atrr= "img/" + rand_url[n-1];
			  /*if (browser == "Microsoft Internet Explorer") {
			  	myDiv.ondblclick = function(){
					new ImageExpander(this.id, \""+atrr+"\");
				}
			  }
			  else {
			  	myDiv.setAttribute('ondblclick', 'new ImageExpander(this, \"'+atrr+'\");');
			  }*/

			  
			  myDiv.innerHTML =  "<img src=img/thumb/" + rand_url[n-1] + " ondblclick='new ImageExpander(this,\""+atrr+"\");' width="+width+" height = "+height+"/>";
			  
			  if (browser == "Microsoft Internet Explorer") {
			  	myDiv.style.styleFloat = 'left';
			  	main.style.styleFloat = 'left';
			  }
			  else {
			  	myDiv.style.cssFloat = "left";
			  	main.style.cssFloat = "left";
			  }
			  
			  //Finally create div with all properties
			  main.appendChild(myDiv);
	      }
	}
}


/*
 * Image Animation
 */

function ImageExpander(oThumb, sImgSrc)
{
	// store thumbnail image and overwrite its onclick handler.
	this.oThumb = oThumb;
	this.oThumb.expander = this;
	this.oThumb.onclick = function() { this.expander.expand(); }
	
	// record original size
	this.smallWidth = oThumb.offsetWidth;
	this.smallHeight = oThumb.offsetHeight;	

	this.bExpand = true;
	this.bTicks = false;
	
	// self organized list
	if ( !window.aImageExpanders )
	{
		window.aImageExpanders = new Array();
	}
	window.aImageExpanders.push(this);

	// create the full sized image.
	this.oImg = new Image();
	this.oImg.expander = this;
	this.oImg.onload = function(){this.expander.onload();}
	this.oImg.src = sImgSrc;
}

ImageExpander.prototype.onload = function()
{
	this.oDiv = document.createElement("div");
	document.body.appendChild(this.oDiv);
	this.oDiv.appendChild(this.oImg);
	this.oDiv.style.position = "absolute";
	this.oDiv.expander = this;
	this.oDiv.onclick = function() {this.expander.toggle();};
	this.oImg.title = "Click to reduce.";
	this.bigWidth = this.oImg.width;
	this.bigHeight = this.oImg.height;
	
	if ( this.bExpand )
	{
		this.expand();
	}
	else
	{
		this.oDiv.style.visibility = "hidden";
		this.oImg.style.visibility = "hidden";
	}
}
ImageExpander.prototype.toggle = function()
{
	this.bExpand = !this.bExpand;
	if ( this.bExpand )
	{
		for ( var i in window.aImageExpanders )
			if ( window.aImageExpanders[i] !== this )
				window.aImageExpanders[i].reduce();
	}
}
ImageExpander.prototype.expand = function()
{
	// set direction of expansion.
	this.bExpand = true;

	// set all other images to reduce
	for ( var i in window.aImageExpanders )
		if ( window.aImageExpanders[i] !== this )
			window.aImageExpanders[i].reduce();

	// if not loaded, don't continue just yet
	if ( !this.oDiv ) return;
	
	// hide the thumbnail
	this.oThumb.style.visibility = "hidden";
	
	// calculate initial dimensions
	this.x = this.oThumb.offsetLeft;
	this.y = this.oThumb.offsetTop;
	this.w = this.oThumb.clientWidth;
	this.h = this.oThumb.clientHeight;
	
	this.oDiv.style.left = this.x + "px";
	this.oDiv.style.top = this.y + "px";
	this.oImg.style.width = this.w + "px";
	this.oImg.style.height = this.h + "px";
	this.oDiv.style.visibility = "visible";
	this.oImg.style.visibility = "visible";
	
	// start the animation engine.
	if ( !this.bTicks )
	{
		this.bTicks = true;
		var pThis = this;
		window.setTimeout(function(){pThis.tick();},25);	
	}
}
ImageExpander.prototype.reduce = function()
{
	// set direction of expansion.
	this.bExpand = false;
}
ImageExpander.prototype.tick = function()
{
	// calculate screen dimensions
	/*if (browser == "Microsoft Internet Explorer") {
		var cw = document.body.clientWidth;
		var ch = document.body.clientHeight;
	}
	else{
		var cw = document.getElementById('main').offsetWidth;
		var ch = document.getElementById('main').offsetHeight;
	}*/
	var cw = document.getElementById('main').offsetWidth;
	var ch = document.getElementById('main').offsetHeight;
	var cx = document.body.scrollLeft + cw / 1.9;
	var cy = document.body.scrollTop + ch / 1.9;

	// calculate target
	var tw,th,tx,ty;
	if ( this.bExpand )
	{
		tw = this.bigWidth;
		th = this.bigHeight;
		if ( tw > cw )
		{
			th *= cw / tw;
			tw = cw;
		}	
		if ( th > ch )
		{
			tw *= ch / th;
			th = ch;
		}
		tx = cx - tw / 2;
		ty = cy - th / 2; 
	}
	else
	{
		tw = this.smallWidth;
		th = this.smallHeight;
		tx = this.oThumb.offsetLeft;
		ty = this.oThumb.offsetTop;
	}	
	// move 5% closer to target
	var nHit = 0;
	var fMove = function(n,tn) 
	{
		var dn = tn - n;
		if ( Math.abs(dn) < 3 )
		{
			nHit++;
			return tn;
		}
		else
		{
			return n + dn / 10;
		}
	}
	this.x = fMove(this.x, tx);
	this.y = fMove(this.y, ty);
	this.w = fMove(this.w, tw);
	this.h = fMove(this.h, th);
	
	this.oDiv.style.left = this.x + "px";
	this.oDiv.style.top = this.y + "px";
	this.oImg.style.width = this.w + "px";
	this.oImg.style.height = this.h + "px";

	// if reducing and size/position is a match, stop the tick	
	if ( !this.bExpand && (nHit == 4) )
	{
		this.oImg.style.visibility = "hidden";
		this.oDiv.style.visibility = "hidden";
		this.oThumb.style.visibility = "visible";

		this.bTicks = false;
	}
	
	if ( this.bTicks )
	{
		var pThis = this;
		window.setTimeout(function(){pThis.tick();},25);
	}
}

//create new instance
var _main = new main();